<div id="userPasswordPage" data-role="page" class="page type-interior userPasswordPage">
    <div>
        <div class="content-primary">
            <div class="verticalSection">
                <div class="sectionTitleContainer flex align-items-center">
                    <h2 class="sectionTitle username"></h2>
                    <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/users/">${Help}</a>
                </div>
            </div>

            <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
                <a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('useredit.html', true);">${Profile}</a>
                <a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('userlibraryaccess.html', true);">${TabAccess}</a>
                <a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('userparentalcontrol.html', true);">${TabParentalControl}</a>
                <a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('userpassword.html', true);" class="ui-btn-active">${HeaderPassword}</a>
            </div>

            <div class="readOnlyContent">
                <form class="updatePasswordForm passwordSection hide" style="margin: 0 auto 2em;">
                    <div class="detailSection">
                        <div id="fldCurrentPassword" class="inputContainer hide">
                            <input is="emby-input" type="password" id="txtCurrentPassword" label="${LabelCurrentPassword}" autocomplete="off" />
                        </div>
                        <div class="inputContainer">
                            <input is="emby-input" type="password" id="txtNewPassword" label="${LabelNewPassword}" autocomplete="off" />
                        </div>
                        <div class="inputContainer">
                            <input is="emby-input" type="password" id="txtNewPasswordConfirm" label="${LabelNewPasswordConfirm}" autocomplete="off" />
                        </div>
                        <br />
                        <div>
                            <button is="emby-button" type="submit" class="raised button-submit block"><span>${Save}</span></button>
                            <button is="emby-button" type="button" id="btnResetPassword" class="raised button-cancel block hide">
                                <span>${ResetPassword}</span>
                            </button>
                        </div>
                    </div>
                </form>
                <br />
                <form class="localAccessForm localAccessSection" style="margin: 0 auto;">
                    <div class="detailSection">
                        <div class="detailSectionHeader">
                            ${HeaderEasyPinCode}
                        </div>
                        <br />
                        <div>${EasyPasswordHelp}</div>
                        <br />
                        <div class="inputContainer">
                            <input is="emby-input" type="number" id="txtEasyPassword" label="${LabelEasyPinCode}" autocomplete="off" pattern="[0-9]*" step="1" maxlength="5" />
                        </div>
                        <br />
                        <div class="checkboxContainer checkboxContainer-withDescription">
                            <label>
                                <input type="checkbox" is="emby-checkbox" class="chkEnableLocalEasyPassword" />
                                <span>${LabelInNetworkSignInWithEasyPassword}</span>
                            </label>
                            <div class="fieldDescription checkboxFieldDescription">${LabelInNetworkSignInWithEasyPasswordHelp}</div>
                        </div>
                        <div>
                            <button is="emby-button" type="submit" class="raised button-submit block">
                                <span>${Save}</span>
                            </button>
                            <button is="emby-button" type="button" id="btnResetEasyPassword" class="raised button-cancel block hide">
                                <span>${ButtonResetEasyPassword}</span>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
